<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>联盟机票</title>
    <div class='s'>
            <div class='s2'>客户端下载 </div>
            <div class='s3'>免费注册 </div>
            <div class='s1'>登陆</div>
            </div>
    <script>function date(){
        var date=new Date();
         var year=date.getFullYear();
         var month=date.getMonth();
         month=month+1;
         var d=date.getDate();
         var x=date.getDay();
         if(x==0){
            x=7;
         }
         var st="今天是"+year+"年"+month+"月"+d+"日星期"+x;
         document.getElementById("h").innerHTML=st;
                 }
        </script>
        <script src="add.js"></script>
        <script src="change.js"></script>
        <script src="remove.js"></script>
        <script src="check.js"></script>
        <div id="h"></div>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
        #h{
            
            width: 300px;
            font-size: 20px;
        }
        #h1{
            position: relative;
            top:-40px;
            width:1000px;
        }
        #b{
            position:relative;
            left:269px;
            border: none;
            top:-2px;
            background-color: red;
            color: white;
            width: 15px;
            height: 15px;
            line-height: 15px;
        }
        #b1{
            position: relative;
            top:11px;
            left:600px;
            outline: none;/*消除默认点击蓝色边框效果*/
            border-color:transparent;
            background:transparent
        }
        #b2{
            position: relative;
            left:220px;
           }
        #su{
            position: relative;
            left:340px;
        }
        .s{
            position: relative;
        
            left:-30px
        }
        .s1{
            float: right;
            font-size: 20px;
            color: orange;
            width:50px
        }
        .s2{

            float: right;
            font-size: 20px;
            
        }
         .s3{

            float: right;
            font-size: 20px;
            width: 90px;

            }
        #s{
            position: relative;
        }
        #s1{
            position: relative;
            left:20px;
            color:blue;
            font-size: 20px;
        }
        #s2{
            position: relative;
            top:-40px;
        }
        #s8{
            position:relative;
            left:-163px;
        }
        #s3{
            position: relative;
            top:-40px;
            left:-30px;
            color: darkblue;
        }
        #s4{
            position: relative;
            left:-109px;
            color: darkblue;
        }
        #s5{
            position: relative;
            top:-40px;
            left:-110px;
            color: darkblue;
        }
        #s6{
            position: relative;
            top:-40px;
            left:-110px;
            
        }
        #s7{
            position: relative;
            left:-278px;
            
        }
        #s9{
            position: relative;
            top:-60px;
            left:700px;
            width: 600px;
        }
        #s10{
            position: relative;
           /* left:-455px;*/
           top:-42px;
            left:700px;
            width:189px;
        }
        #s11{
            position :relative;
            top:-70px;
            left:720px;
        }
        #s12{
            position :relative;
            top:-50px;
            left:620px;
        }
        #s15{
            color:darkblue;
        }
        #s16{
          font-size: 17px;
          font-weight: bold;
        }
        #s17{
            color:red;
            top:-30px;
            left:100px;
        }
        #s18{
            position: relative;
            left:50px;
            top:3px;
        }
        #s19{
            position: relative;
            left:80px;
            top:3px;
        }
        .s20{
            position: relative;
            left:30px;
        }
        .s21{
            position: relative;
            left:50px;
        }
        #s22{
            position: relative;
            color:darkblue;
            left:150px;
            top:3px;
        }
        #s23{
            position: relative;
            left:20px;
        }
        #s24{
            position: relative;
            left:265px;
        }
        #s26{
            position: relative;
            left:70px;
            color: red;
        }
        #s27{
            position: relative;
            left:75px;
        }
        #s28{
            position: relative;
            left:70px;
            width: 150px;
            height:20px;
            border-width: 0.1px;
        }
        #se28{
            position: relative;
            left:70px;
            width: 150px;
            height:20px;
            border-width: 0.1px;
        }
        #t{
            position: relative;
            left:96.5px;
            width: 150px;
            height: 20px;
            border-width: 0.1px;
        }
        #t1{
            position: relative;
            left:75px;
            width: 150px;
            height: 20px;
            border-width: 0.1px;
        }
        #t2{
            position: relative;
            left:75px;
            width: 150px;
            height: 20px;
            border-width: 0.1px;
        }
        #t3{
            position: relative;
            left:70px;
            width: 150px;
            height: 20px;
            border-width: 0.1px;
        }
        #t4{
            position: relative;
            left:70px;
            width: 40px;
            height: 20px;
            border-width: 0.1px;
        }
        #t5{
            position: relative;
            left:70px;
            width: 60px;
            height: 20px;
            border-width: 0.1px;
        }
        #t6{
            position: relative;
            left:70px;
            width: 40px;
            height: 20px;
            border-width: 0.1px;
        }
        #t7{
            position: relative;
            left:85px;
            width: 150px;
            height: 20px;
            border-width: 0.1px;
        }
        #t8{
            position: relative;
            left:70px;
            width: 150px;
            height: 20px;
            border-width: 0.1px;
        }
        #s29{
            position: relative;
            left:75px;
            width: 100px;
        }
        #s30{
            position: relative;
            left:80px;
            width: 100px;
            color: darkblue;
        }
        #s31{
          line-height: 30px;
          font-size: 17px;
          font-weight: bold;
        }
        #s32{
            position: relative;
            left:80px;
        }
        #d0{ 
            position: relative;
            left:10px;
            color: crimson;
            font-size: 40px;
        }
        #d1{
            position: relative;
            left:150px;
            width:1200px;
            height: 1145px;
            background-color: white;
            opacity: 0.8;
        }
        #d{
            position: relative;
            left:-10px;
            width:1450px;
            height: 1200px;
            background: url("tu.jpg") no-repeat;    
        }
        #d2{
            float: right;
        }
        #d3{
            position: relative;
          background-color: turquoise;
          top:30px;
          width:1000px;
          height: 30px;
         line-height: 30px;/*要实现一个文字上下居中的效果，一般采取的方法是line-height等于当前div的高度*/
         font-size: 17px;
         font-weight: bold;
        }
        #d4{
            position: relative;
            height:95px;
            top:30px;
        }
        #d5{
            position: relative;
        
        }
        #d6{
            position: relative;
          background-color: turquoise;
          width:1000px;
         line-height: 30px;
        }
        #d7{
            position: relative;
            left:40px;
        }
       #d8,#d80,#d81,#d82,#d83{
           position:relative;
           width:500px;
           height:160px;
           border: solid gray;
           border-width: 1px;
           left:120px;
           top:10px;
       }
       /* #张某某,#李某某,#王某某{
           position:relative;
           width:500px;
           height:160px;
           border: solid gray;
           border-width: 1px;
           left:120px;
           top:10px;
       } */
       #div{
           position:relative;
           left:120px;
           width:500px;
           height:160px;
           border: solid gray;
           border-width: 1px;
           top:10px;
       }
       #d9{
           position: relative;
            width:500px;
           background-color:lightgrey;
       }
       #d10{
        position: relative;
        top:10px;
       }
       #d11{
        position: relative;
        top:20px;
       }
       #d12{
        position: relative;
        top:30px;
       }
       #d13{
        position: relative;
        top:40px;
       }
       #d14{
          position: relative;
          top:13px;
          background-color: turquoise;
          width:1000px;
        }
        #d15{
            position: relative;
            top:20px;
            left:119px;
        }
        #d16{
            position: relative;
            top:30px;
            left:119px;
        }
        #d17{
            position: relative;
            top:40px;
            left:125px;
        }
        #d18{
            position: relative;
            top:50px;
            left:125px;
        }
        #d19{
            position: relative;
            top:60px;
            left:125px;
        }
        #d20{
            position: relative;
            top:70px;
            left:125px;
        }
        #d21{
            position: relative;
            top:80px;
            left:20px;
        }
        #d22{
            position:fixed ;/*元素随滚动条滚动*/
            top:138px;
            left:1150px;
            width:170px;
            height: 180px;
            background-color: white;
            opacity: 1;
            border: 1px solid;
            background-attachment: scroll;
        }
        #d23{
            position: relative;
            background-color: lightgrey;
            width: 170px;
            height: 30px;
            text-align: center;
        }
        #di{
            position: relative;
        }

        </style>
</head>

<body onload="date()">
    <div id='d'><div id='d0'>联盟.机票</div>
           <!--<img src="E:\HTML\html\airplane\tu.jpg">-->
        <div id='d1'>
            <span id="s1">预定机票</span>
            <hr>
            <div id="d2">
            <input type="radio" checked name="r1">选择----
            <input type="radio"checked name='r2'>预定----
            <input type="radio" name="r1">核对----
            <input type="radio" name="r1">支付----
            <input type="radio" name="r2">完成----
            </div>
            <div id="d3">航班信息</div>
            <div id='d4'>
            <img src="t.jpg">
            <span id="s2">中国南方航空 CZ3850</span>
            <span id="s8">直达</span>
            <span id="s3">[修改航班]</span>
            <span id="s4">[修改舱位]</span>
            <span id="s5">[退改签]</span>
            <span id="s6">2019年12月31日18:10</span>
            <span id="s7">2019年12月31日20:40</span>
            <div id="s9">大连周水子国际机场-起飞</div>
            <span id="s10">武汉天河国际机场-到达</span>
            <span id="s11">￥350元/成人</span>
            <span id="s12">(含税费)</span>
            <hr id="h1">
            </div>
         <div id="d5"> 总价：<span id="s13">￥350元(含税费) </span>人数：<span id="s14">1人</span> <span id="s15">机票明细</span></div>
           <div id="d6">
               <span id="s16">乘客信息</span> &nbsp;&nbsp;&nbsp;<span id="s17">请准确填写乘客信息(姓名、证件号码)以免在办理登记手续时发生问题。</span><br>
        </div>
        <div id="d7">
        <span id="s18">在常用姓名中搜索<input type="text"></span>
        <span id="s19"><span><input type="checkbox" id="c" onclick="add('张某某',event)" class="张某某">张某某</span><span class="s20" ><input type="checkbox" id="c1" onclick="add('李某某',event)" class="李某某">李某某 </span><span class="s21"><input type="checkbox" id="c2" onclick="add('王某某',event)" class="王某某">王某某</span></span>
        <span id="s22">更多</span>
        </div>
        <div id="d8">
            <div id="d9">
            <span id="s23">第一位乘机人：</span>
            <span id="s0"></span>
            <span id="s24"><input type="checkbox">保存常用名</span>
            <span ><input type="button" value="x" id="b" onclick="remov(event)"></span>
        </div>
        <div id="d10">
            <span id="s26"> *</span><span id="s27">购票类型：
            </span><select id="s28" >
            <option selected>成人票</option>
            <option >儿童票</option>
            <option >婴儿票</option>
        </select>
        <span id="s29">￥350元(含税费)</span>
            <span id="s30">退改签</span>
            
    </div>
    <div id="d11">
    <span id="s26"> *</span><span id="s27">姓&nbsp;&nbsp;名：</span><span><input type="text" id="t"></span>
</div>
    <div id="d12">
            <span id="s26"> *</span><span id="s27">证件类型：</span>
            <select id="se28" onchange="change(event)">
                    <option selected>身份证</option>
                    <option >护照</option>
                </select>
    </div>
    <div id="d13">
            <span id="s26"> *</span><span id="s27">证件号码：</span><span><input type="text" id="t1"></span>
    </div>
        </div>  
        <div id="dd"></div>
        <div id="di">
        <input type="button" value="增加乘客" id="b1" onclick="ad()">
        <div id="d14">
            <span id="s31">联系人信息</span> &nbsp;&nbsp;&nbsp;<span id="s17">请您准确填写联系人信息(联系人、手机号、E-mail)，以便我们与您联系。</span><br>
        </div> 
        <div id="d15">
                <span id="s26"> *</span><span id="s27">联&nbsp;系&nbsp;人：</span><span><input type="text" id="t2"></span>
            </div>
            <div id="d16">
                    <span id="s26"> *</span><span id="s27">手机号码：</span><span><input type="text" id="t3"></span>
                </div>
            <div id="d17">
                    <span id="s27">联系电话：</span><span><input type="text" id="t4"  placeholder="区号"> <input type="text" id="t5"  placeholder="电话号码"> <input type="text" id="t6"  placeholder="分机"></span>
                    <!--在placeHolder标签中设置文本内容,在你输入时文本内容会自动消失。-->
                    <!--在value标签中设置文本内容,文本框内容需要手动删除。-->
                </div>
            <div id="d18">
                    <span id="s27">传真号码：</span><span><input type="text" id="t4"  placeholder="区号"> <input type="text" id="t5"  placeholder="电话号码"> <input type="text" id="t6"  placeholder="分机"></span>
            </div>
            <div id="d19">
                    <span id="s32">E-mail：</span><span><input type="text" id="t7"></span>
            </div>
            <div id="d20">
                    <span id="s27">联系地址：</span><span><input type="text" id="t8"></span>
            </div>
            <div id="d21">
                <input type="button" id="b2" value="上一步">
                <input type="submit" id="su" value="下一步" onclick="check()">
            </div>
            </div>
            <div id="d22">
                <div id="d23">贴心提示</div>
                <sapn>·机票查询</sapn>
                <div>·机票价格</div>
                <div>·支付方式</div>
                <div>·配送方式</div>
                <div>·行程单/报销凭证/发票</div>
                <div>·订单修改与取消</div>
                <div>·乘机常识</div>
            </div>
    </div>
</body>
</html>